<template>
    <div class="page-wrap">
        <div class="page-content p-0">
            <div class="page-column p-0 p-b-20">
                <!-- 表格搜索区域 -->
                <div class="search-box">
                    <div class="search-left">
                        <el-button type="primary" class="m-r-12" size="medium" icon="el-icon-circle-plus"
                            @click="addPerson" :disabled="treeNode.nodeType == 'cate'">新增成员
                        </el-button>
                    </div>

                </div>
                <!-- 表格区域 -->
                <div class="table-box">
                    <el-table v-loading="loading" height="100%" :data="tableData.columnData"
                        @selection-change="selectionChange">
                        <el-table-column type="selection" width="50"></el-table-column>
                        <el-table-column label="姓名" prop="username" width="150" align="left" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <img-show :name="scope.row.username"></img-show>
                            </template>
                        </el-table-column>
                        <el-table-column label="工号" prop="employeeNo" width="150" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="邮箱" prop="email" min-width="120" align="left" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="手机号" prop="mobile" min-width="120"></el-table-column>
                        <el-table-column label="操作" fixed="right" width="100">
                            <template slot-scope="scope">
                                <el-button type="text" @click="removeUser(scope.row.id)">移除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>

        </div>
        <!-- 表格相关操作组件区域 -->
        <selectUserDialog :visible.sync="show" :data="userData" @update="saveRoleUserFun"></selectUserDialog>
    </div>
</template>

<script>
    import mulPerson from '@/components/mulPerson';
    import imgShow from '@/components/avator/imgShow';
    import selectUserDialog from '@/components/selectDialog/selectUserDialog';
    import {
        queryUserByRoleId,
        saveRoleUser,
        deleteRoleUser
    } from '../service.js';
    export default {
        name: 'roleUser', // 角色成员
        props: {
            treeNode: {
                type: Object,
                default () {
                    return {}
                }
            },
            isView: {
                type: Boolean,
                default: false
            },
            viewObj: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        components: {
            mulPerson,
            imgShow,
            selectUserDialog
        },
        data() {
            return {
                show: false,
                tableData: {
                    columns: '',
                    orders: '',
                    currentPage: 1,
                    pageSize: 15,
                    total: 0,
                    columnData: []
                },
                selection: [],
                userData: [],
                loading: false,
                conds: {},
            }
        },
        watch: {
            treeNode: {
                handler: function (node) {
                    if (node.nodeType == 'cate') {
                        this.tableData.columnData = [];
                    } else {
                        this.queryList();
                        // this.$refs.search.resetForm2();
                    }
                },
                imediate: true
            }
        },
        methods: {
            clickQuery(conds = {}) {
                this.conds = conds;
                this.tableData.currentPage = 1;
                this.queryList();
            },
            queryList() {
                let params = {
                    roleId: this.treeNode.id,
                    ...this.conds
                }
                this.loading = true;
                queryUserByRoleId(params).then(res => {
                    if (res.data.code == 1000) {
                        let data = res.data.data;
                        if (Array.isArray(data.data)) {
                            this.tableData.columnData = [...data.data];
                            this.tableData.total = 0;
                        } else {
                            this.tableData.columnData = [];
                            this.tableData.total = 0;
                        }
                    }
                    this.loading = false;
                }).catch(error => {
                    this.loading = false;
                })
            },
            addPerson() {
                this.userData = this.tableData.columnData.map(item => {
                    return {
                        ...item,
                        id: item.userId
                    }
                })
                this.show = true;
            },
            saveRoleUserFun(list) { // 角色批量添加人员
                if (list.length) {
                    let roleUserList = list.map(item => {
                        return {
                            roleId: this.treeNode.id,
                            userId: item.id
                        }
                    })
                    let params = {
                        roleUserList: JSON.stringify(roleUserList)
                    }
                    saveRoleUser(params).then(res => {
                        if (res.data.code == 1000) {
                            this.$notify({
                                title: '提示',
                                type: 'success',
                                message: '添加成功'
                            })
                            this.queryList();
                        }
                    })
                }
            },
            removeUser(id) { // 删除角色下的人
                this.$confirm('确认删除选中的人员？', {
                    title: '提示',
                    type: 'warning'
                }).then(res => {
                    let params = {
                        ids: id
                    }
                    deleteRoleUser(params).then(res => {
                        if (res.data.code == 1000) {
                            this.$notify({
                                title: '提示',
                                type: 'success',
                                message: '删除成功'
                            })
                            this.queryList();
                        }
                    })
                })
            },
            selectionChange(selection) {
                this.selection = selection;
            },
            mulDelete() {
                let ids = this.selection.map(item => item.id).join();
                this.removeUser(ids);
            },
        }
    }
</script>